<template>
	<view class="h-p">
		<view class="selct-title">请选择结算类型 <text class="select-text">（入驻后提交无法修改）</text></view>
		<view class="settle-box flex justify-between item-center" :class="{'sel-color':type==1}" @click="selectSettle(1)">
			<image src="@/applyPages/static/icon-sellement1.svg" mode="" class="icon-settle"></image>
			<view class="settle-inner-box">
				<view class="settle-title">对公账户结算</view>
				<view class="settle-inner">使用对公账户结算，需要提供营业执照照片、法人身份证照片、对公账户开户许可。</view>
			</view>
		</view>
		<view class="settle-box settle-color flex justify-between item-center" :class="{'sel-color':type==2}" @click="selectSettle(2)">
			<image src="@/applyPages/static/icon-sellement2.svg" mode="" class="icon-settle"></image>
			<view class="settle-inner-box">
				<view class="settle-title">个人账户结算</view>
				<view class="settle-inner">使用个人账户结算，需提供负责人身份证照片、结算银行卡照片。</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="release-btn" @click="nextStep">下一步</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	const type = ref('')
	import {onLoad} from '@dcloudio/uni-app'
	const code = ref()
	const selectSettle = (num) => {
		type.value = num
	}
	const nextStep = () => {
		if(!type.value){
			uni.showToast({
				icon: 'none',
				title: '请选择结算类型'
			})
			return
		}			
		let params = code.value?`?code=${code.value}`:``
		if(type.value == 2){
			uni.navigateTo({
				url:`/applyPages/bussinessApply/bussinessApply${params}`
			})
		}else{
			uni.navigateTo({
				url:`/applyPages/businessPage/businessPage${params}`
			})
		}
	}
	onLoad((query) => {
		if(query.code){
			code.value = query.code
		}
	})
</script>

<style scoped lang="scss">
.h-p{
	height: 100vh;
	box-sizing: border-box;
	padding: 20rpx;
	background-color: #ffffff;
}
.selct-title{
	font-family: PingFang SC;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	margin-top: 40rpx;
	.select-text{
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
	}
}	
.settle-box{
	margin: 40rpx 0rpx;
	padding: 40rpx;
	box-shadow: 0px 2px 10px 0px rgba(57, 0, 0, 0.3);
	border-radius: 12px;
	background: linear-gradient(180deg, #FFFFFF 0%, rgba(254, 222, 198, 0.4) 100%);
	border: 1px solid #FFFFFF;
	&.settle-color{
		background: linear-gradient(180deg, #F7F7F7 0%, rgba(255, 210, 214, 0.4) 100%);
	}
	&.sel-color{
		border: 1px solid rgba(250, 69, 67, 1);
	}
	.settle-inner-box{
		width: calc(100% - 140rpx);
	}
	.icon-settle{
		width: 92rpx;
		height: 92rpx;
		margin-right: 40rpx;
	}
	.settle-title{
		font-family: PingFang SC;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 22px;
		color: #333333;
		margin-bottom: 10px;
	}
	.settle-inner{
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 17px;
		letter-spacing: 0px;
		text-align: left;
		color: rgba(51, 51, 51, 0.9);
	}
}
.release-btn {
		// width: 343px;
		height: 46px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		// gap: 10px;
		background: #FA4543;
		color: #ffffff;
		margin: 10px 20px;
		text-align: center;
		line-height: 46px;

		&.unactive {
			background: rgba(169, 171, 172, 1);
		}
	}

	.k-page {
		height: 120px;
	}

	.btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 7;
		padding: 20px 0;
	}
</style>
